<template>
    <Modal title="私有分享" v-model="show" :closable="false" :mask-closable="false" @on-visible-change="showModal" :width="1200">
        <el-card v-loading="loading">
            <div slot="header" class="clearfix">
                <span>商品信息</span>
            </div>
            <div class="st-product-wrap">
                <img class="st-product-wrap-image" :src="product.pics">
                <div class="st-product-wrap-info">
                    <div class="st-product-wrap-info-it"> 商品名：{{product.productName}}</div>
                    <div class="st-product-wrap-info-it"> 规格属性：{{product.variationName}}</div>
                    <div class="st-product-wrap-info-it"> sku编码：{{product.skuCode}}</div>
                    <!-- <div class="st-product-wrap-info-it"> 库存：{{product.stock}}</div> -->
                </div>
            </div>
            <el-divider>
                已分享好友
            </el-divider>
            <template v-if="items.length>0">
                <el-row class="sku-list" :gutter="10">
                    <el-col v-for="(sku,ind) in items" :span="4" :key="ind">
                        <div v-loading="sku.loading">
                            <div class="variation-name">
                                好友：{{sku.toUserName}}
                                <i @click="removeLian(sku)" style="margin-top:5px;float: right;font-size: 14px" class="el-icon-delete"></i>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </template>
            <template v-else>
                <div>
                    <span style="color:#f00">暂未分享给任何好友</span>
                </div>
            </template>
        </el-card>
        <div style="margin-top: 20px">
            <el-form v-model="formInfo" inline>
                <el-form-item label="好友ID" :rules="[{required:true,message:'好友ID必填'}]">
                    <el-input size="small" v-model="formInfo.userId" placeholder="好友ID" style="width: 120px" />
                </el-form-item>
                <el-form-item label="手机号码" :rules="[{required:true,message:'手机号码必填'}]">
                    <el-input size="small" v-model="formInfo.phone" placeholder="手机号码" style="width: 120px" />
                </el-form-item>
                <el-form-item>
                    <el-button size="small" @click="submit" :loading="shareLoading" type="primary">确认分享</el-button>
                    <el-button size="small" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer">
            <el-button size="small" type="success" @click="cancel">关闭</el-button>
        </div>
    </Modal>
</template>
<script>
export default {
    name: 'CShareDialog',
    data() {
        return {
            shareLoading: false,
            show: false,
            items: [],
            loading: false,
            formInfo: {
                userId: null,
                phone: null
            }
        }
    },
    props: [
        'product'
    ],
    methods: {
        reset: function() {
            this.formInfo = {
                userId: null,
                phone: null
            };
        },
        cancel: function() {
            this.show = false;
        },
        showDialog() {
            this.show = true;
        },
        showModal(val) {
            if (val) {
                this.getChilds();
            } else {

            }
        },
        removeLian(row) {
             row.loading=true;
            this.$http.post("/storageproduct/doShareDelete.do", { id: row.productId}).then(response => {
                row.loading=false;
                var body = response;
                if (body.status == 0) {
                    this.getChilds();

                } else {
                    this.errorMessage( body.info);
                }
            }).catch(error => {
                 row.loading=false;
                this.errorMessage("操作异常!");
            });
        },
        submit: function() {
            this.shareLoading = true;
            this.$http.post("/storageproduct/submitShare.do", { productId: this.product.id, userId: this.formInfo.userId, phone: this.formInfo.phone }).then(response => {
                this.shareLoading = false;
                if (response.status == 0) {
                    this.getChilds();
                } else {
                    this.errorMessage(response.info);
                }
            }, response => {
                this.errorMessage("系统异常");
                this.shareLoading = false;
            });
        },
        getChilds: function() {
            this.loading = true;
            this.$http.post("/storageproduct/getShareChilds.do", { productId: this.product.id }).then(response => {
                this.loading = false;
                if (response.status == 0) {
                    this.items = response.obj;
                } else {
                    this.errorMessage(response.info);
                }
            }, response => {
                this.errorMessage("系统异常");
                this.loading = false;
            });
        },
    }
}
</script>
<style scoped>
.st-product-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;

}

.st-product-wrap-image {
    width: 120px;
    height: 120px;
    margin-right: 10px;
}

.st-product-wrap-info-it {
    line-height: 30px;
    font-size: 15px;
}

.sku-list {}

.sku-list .el-col {


    list-style: none;
    margin-bottom: 10px;

}

.sku-list .el-col>div {
    border-radius: 5px;
    padding: 5px 10px;
    border: 1px solid #67c23a;
}

.sku-list .el-col .item-name {
    font-size: 14px;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}

.sku-list .el-col .variation-name {
    font-size: 14px;
    color: #f00;
    margin-bottom: 10px;
}

.sku-list .el-col .shop-name {
    font-size: 16px;
    color: #f00;
    margin-bottom: 10px;
}
</style>